<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Registration</title>

<link rel="stylesheet" type="text/css" media="screen"
	href="./css/screen.css" />

<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">


	$()
			.ready(
					function() {
						// validate the comment form when it is submitted
						$("#commentForm").validate();

						// validate signup form on keyup and submit
						$("#signupForm")
								.validate(
										{
											rules : {
												firstname : "required",
												lastname : "required",
												username : {
													required : true,
													minlength : 4
												},
												password : {
													required : true,
													minlength : 6
												},
												confirm_password : {
													required : true,
													minlength : 6,
													equalTo : "#password"
												},
												email : {
													required : true,
													email : true
												},
												address : {
													required : true,
												},
												zipcode : {
													required : true,

												},
												state : "required"
											},
											messages : {
												firstname : "Please enter your firstname",
												lastname : "Please enter your lastname",
												username : {
													required : "Please enter a username",
													minlength : "Your username must consist of at least 4 characters"
												},
												password : {
													required : "Please provide a password",
													minlength : "Your password must be at least 6 characters long"
												},
												confirm_password : {
													required : "Please provide a password",
													minlength : "Your password must be at least 6 characters long",
													equalTo : "Password does not match"
												},
												email : "Please enter a valid email address",
												agree : "Please accept our policy"
											}
										});

						// propose username by combining first- and lastname
						$("#username").focus(function() {
							var firstname = $("#firstname").val();
							var lastname = $("#lastname").val();
							if (firstname && lastname && !this.value) {
								this.value = firstname + "." + lastname;
							}
						});
	
					});
</script>

<style type="text/css">
#commentForm {
	width: 500px;
}

#commentForm label {
	width: 250px;
}

#commentForm label.error,#commentForm input.submit {
	margin-left: 253px;
}

#signupForm {
	width: 670px;
}

#signupForm label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
}

#newsletter_topics label.error {
	display: none;
	margin-left: 103px;
}
</style>

</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>

	<h1 id="banner">Registartion</h1>

	<form class="cmxform" id="signupForm" method="post" action="RegisterUser">
		<fieldset>
			<legend>Fill out the form to register</legend>
			<p>
				<label for="firstname">Firstname</label> <input id="firstname"
					name="firstname" />
			</p>
			<p>
				<label for="lastname">Lastname</label> <input id="lastname"
					name="lastname" />
			</p>
			<p>
				<label for="username">Username</label> <input id="username"
					name="username" />
			</p>
			<p>
				<label for="password">Password</label> <input id="password"
					name="password" type="password" />
			</p>
			<p>
				<label for="confirm_password">Confirm password</label> <input
					id="confirm_password" name="confirm_password" type="password" />
			</p>
			<p>
				<label for="email">Email</label> <input id="email" name="email"
					type="email" />
			</p>
			<p>
				<label for="address">Street Address</label> <input id="address"
					name="address" type="address" />
			</p>

			<p>
				<label for="state">State</label> <select id="state" name="state"
					type="state">
					<option>Choose Your State</option>
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="DC">District of Columbia</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
					<select />
			</p>
			<p>
				<label for="zipcode">Zipcode</label> <input id="zipcode"
					name="zipcode" type="zipcode" />
			</p>
			<p>
				<input class="submit" type="submit" value="Submit" />
			</p>
		</fieldset>
	</form>


	<script src="http://www.google-analytics.com/urchin.js"
		type="text/javascript">
		
	</script>
	<script type="text/javascript">
		_uacct = "UA-2623402-1";
		urchinTracker();
	</script>
</body>
</html>
